<template>
    <div class="main">
        <h1 style="font-size:8vw">一图看懂义务教育入学流程</h1>
        <div class="big" style="border-left:2vw solid #FDA428">
            <div class="right">
            <h3 >小学一年级学龄儿童入学信息采集的注意事项</h3>
            <p>采集时间为5月6日至5月31日</p>
            <p>不足年龄无法注册</p> 
            <p>虚假信息无法通过审核</p> 
            <p>注册手机很重要,是获得入学过程信息的重要工具</p>
            </div>
        </div>
        <div class="txt">
			小学入学将推进以多校划片为主，单校划片和多校划片相结合的入学方式。
		</div>
        <div class="one">
            <h1>小学一年级</h1>
            <div class="p1">本市户籍</div>
            <p class="p2">在户籍或房产所在地入学流程</p>
            <div class="bottom">
            <div class="tu"  slot="reference" @click="dianji('a')">流程图</div>
            <div class="sp" slot="reference" @click="dianji('b')">视频讲解</div>
            
            </div>
        </div>
        <div class="one">
            <h1>小学一年级</h1>
            <div class="p1">本市户籍无房家庭</div>
            <p class="p2">在非户籍区入学流程</p>
            <div class="bottom">
                
            <div class="tu"  slot="reference" @click="dianji('a')">流程图</div>
            <div class="sp" slot="reference" @click="dianji('b')">视频讲解</div>
            </div>
        </div>
        <div class="one">
            <h1>小学一年级</h1>
            <div class="p1" >非本市户籍</div>
            <p class="p2">入学流程</p>
            <div class="bottom">
            <div class="tu" slot="reference" @click="dianji('a')">流程图</div>
            <div class="sp" slot="reference" @click="dianji('b')">视频讲解</div>
           </div>
        </div>
    <van-popup v-model="tupian" id="tupian">
        <div>
            <img src="../assets/flow_01.png" width="100%" alt="">
        </div>
    </van-popup>
    <van-popup v-model="shipin" id="shipin">
        <div>
            <video src="../assets/video_01.mp4" width="100%"
            controls="controls" autoplay="autoplay"></video>
        </div>
    </van-popup>

    </div>
</template>
<script>
export default {
    data() {
    return {
      active: 2,
      tupian:false,
      shipin:false
    };
  },
  methods:{
      dianji(a){
          if(a=='a'){
              this.tupian=true;
          }else if(a=='b'){
              this.shipin=true
          }
      }
  }
}
</script>
<style scoped>
h3{
    font-size:5vw; 
    margin-left: 3vw;
}
.p1{
    width: 46vw;
    font-size: 3vw;
}
h1{
    font-size: 6vw;
}
.sp,.tu{
    display: inline-block;
    font-size: 4vw;
    height: 24vw;
    line-height: 24vw;
    width: 47vw;
    color:#BC272E;
}
.one:hover{
    box-shadow: #F2D7D8 0px 0px 2vw 0.4vw;
}
.one>h1{
    margin-top: 12vw;
}
span{
    border-right: 0.1vw solid #F2D7D8;
    display: inline-block;
    height: 24vw;
}
.bottom{
    height: 25vw;
    background-color:#F8EAEB;
    border-radius:1.4vw ;
}
.p2{
    font-size: 4vw;
    color: #666666;
    margin-bottom: 4vw;
}
.p1{
    margin: 0 auto;
    height:8vw;
    line-height: 8vw;
    border-radius:4vw;
    background-color: #BC272E;
    color: seashell;
}
.one{
    margin: 6vw 0vw;
    text-align: center;
    border:1px solid #F2D7D8 ;
    /* height: 300px; */
    border-radius: 1.4vw;
}
.txt{
    padding: 1.4vw ;
    margin: 2vw 0vw;
    background-color: #F2D7D8;
    height: 24vw;
    border-radius:2vw;
    font-size: 6vw;
    font-family: "微软雅黑";
    line-height:8vw;
    color: #BC272E;
    font-weight:600;
}
.big{
    background-color: #FFFCF4;
}
.span{
    display: inline-block;
    height: 32vw;
    width: 2vw;
    border-radius:0.6vw ;
    background-color: #FDA428;
    margin-right:4vw;
}
p{
    margin-left: 6vw;
    font-size: 2vw;
}
.right{
    display: inline-block;
}
.main{
    height: 360vw;
}
#tupian,#shipin{
    width: 100%;
}
</style>